<template>
  <transition name="slideFromBottom" v-if="isshow">
    <div class="arealist">
      <div class="buttonlist">
        <span @click="hideSlider()">取消</span>
        <span @click="confirmTitle()">确定</span>
      </div>
      <input type="text" placeholder="请输入您的足迹标题" v-model.trim="selectedItem.title"/>
    </div>
  </transition>
</template>
<script>
  /* import {HttpRequest} from '../../../common/js/httpFun'
   import {linklist} from '../../../common/js/mockdata' */
  import {ctoast, confirmDialog, checkLen} from '../../../common/js/common'
  export default({
    props: {
      isshow: true,
      selectedItem: {}
    },
    data () {
      return {}
    },
    computed: {
      getItem () {

      }
    },
    beforeCreate () {

    },
    created () {

    },
    mounted () {
    },
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      hideSlider () {
        this.$emit('hideSlider')
      },
      confirmTitle () {
        if (!this.selectedItem.title) {
          this.createToast('请输入您的足迹标题')
          return false
        }
        else {
          if (checkLen(this.selectedItem.title) > 20) {
            this.createToast('足迹标题不得超过20个中文')
            return false
          }
        }
        /* let result = HttpRequest(linklist.editHistoryTitle)
         result.then((response) => {
         }, (response) => {
         }).catch((response) => {
         }) */
        this.hideSlider()
      }
    },
    components: {}
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../common/stylus/redifined.styl"
  .slideFromBottom-enter-active {
    transition: all 0.3s ease-in;
  }

  .slideFromBottom-leave-active {
    transition: all 0.3s ease-in;
  }

  .slideFromBottom-enter, .slideFromBottom-leave-to {
    will-change: transform;
    -webkit-transform: translateY(101%);
    transform: translateY(101%);
  }

  .arealist
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: #fff;
    padding: 0.27rem;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    .buttonlist
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 0.8rem;
      span
        setFontsize(14px)
        &:first-child
          flex 1 1 auto
        &:last-child
          color #d09953
    input
      setFontsize(14px)
      width 100%
</style>
